<%--
  Created by IntelliJ IDEA.
  User: IU
  Date: 2022/3/9
  Time: 8:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>个人网站首页面</title>
    <script src="js/jquery-2.1.0.min.js"></script>
    <script src="js/axios.js"></script>
    <script>
        $(function () {
            //1.找到按扭，添加单击事件
            //在实际开发中，使用on()添加事件，为什么？
            $("#btn").on("click",function () {
                //2.向后台发送Ajax请求
                // $.ajax({
                //     url:"http://localhost:8080/users/findAll",
                //     data:{"time":new Date()},
                //     type:"get",
                //     success:function (data) {
                //         //alert(data);
                //         //console.log(data);
                //        //后台返回的数据是JSON数组，所以需要遍历
                //        for (var i=0;i<data.length;i++)  {
                //            var user=data[i];
                //            //进行DOM操作，ul中放的li,创建一个li节点
                //            var li='<li>'+user.username+'</li>';
                //            //添加li节点到ul中
                //            $("#app").append(li);
                //        }
                //     },
                //     dataType:"json"
                // });
                //使用axios向后台发送Ajax请求
                axios.get("http://localhost:8080/users/findAll").then(function (resp) {
                    //console.log(resp)
                    for (var i = 0; i < resp.data.length;i++){
                        var li='<li>'+resp.data[i].username+'</li>';
                        $("#app").append(li);
                    }
                });
            });
        });
    </script>
</head>
<body>
<!--在html页面中完成和后台交互的方法：-->
<!--1.JavaScript的Ajax实现-->
<!--2.jQuery对Ajax进行封装：load(),$.Ajax(),$.post(),$.get(),$.getJSON()-->
<!--3.axios对Ajax进行封装-->
<!--4.vue:可以使用jQuery的Ajax，也可以使用axios-->

<button id="btn">显示用户</button>
<ul id="app">

</ul>
</body>
</html>
